<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新建订舱委托单</title>
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/js/DateTimePicker.js"></script>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>
    <script src="${ctxStatic}/dateCalendar/WdatePicker.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/css/common.css">
    <link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
    

 	<script type="text/javascript">
    $(document).ready(function(){
    	$("select").select2();
		var form = $("#inputForm");  
        form.validate();//验证指定的表单
    	$("#okButton").click(function(){
    		if (form.valid()) {//如果表单验证成功，则进行提交。  
    		if($("#listHtml tr").length == 0){
    			tipParent("请选择订舱箱单");
    			return;
    		}
    		$("#showHtml").addClass("showHtml");
            $("#okHead").show();
            $("#createHead").hide();  
            $("#showHtml").find("input").removeAttr("disabled");
            return false;
          
          	}
     	});
    });
    
   
    function strHtml(packageId,contractId,indentId,styleId,packageNo,cartonVolume,cartonStyleQuantity,packageQuantity,packageRoughWeight,indentNo,styleCustomerNo,styleNameCn,deliveryDate,InboundDate,countryCd) {
     	var html = "";    		
		html += "<tr>";
		html += "<td class='tab-cz' style='width: 51px'><img src='/ls-qc/static/images/del_icon.png' style='width: 20px' onclick='deletePacking(this);'></td>";
		html += "<td><p class='tab-htddh' style='width: 100px'>"+packageNo+"</p></td>";
		html += "<td><p class='tab-htddh' style='width: 100px'>"+indentNo+"</p></td>";
    	html += "<td><p class='tab-ksbh' style='width: 120px'>"+styleCustomerNo+"<br>"+styleNameCn+"</p></td>";
    	html += "<td><p class='tab-jhrq' style='width: 70px'>"+deliveryDate+"</p></td>";
    	html += "<td><p class='tab-rkrq' style='width: 70px'>"+InboundDate+"</p></td>";
    	html += "<td><p class='tab-gb' style='width: 70px'>"+countryCd+"</p></td>";
    	html += "<td><p class='packageDetialspackageQuantity tab-xs' style='width: 70px'>"+packageQuantity+"</p></td>";
    	html += "<td><p class='packageDetialscartonStyleQuantity tab-js' style='width: 70px'>"+cartonStyleQuantity+"</p></td>";
    	html += "<td><p class='packageDetialspackageRoughWeight tab-mz' style='width: 70px'>"+packageRoughWeight+"</p></td>";
    	html += "<td><p class='packageDetialscartonVolume tab-tj' style='width: 70px'>"+cartonVolume+"</p></td>";
    	html += "<td><input class='tab-bz' style='width: 70px' id='noteRemarks'  name='bookingOrderList[tempIndex].noteRemarks' onblur='this.defaultValue=$(this).val()' value=''></td>";
    	html += "<input type='hidden' name='bookingOrderList[tempIndex].packageId' value='"+packageId+"'/>";
    	html += "<input type='hidden' name='bookingOrderList[tempIndex].contractId' value='"+contractId+"'/>";
    	html += "<input type='hidden' name='bookingOrderList[tempIndex].indentId' value='"+indentId+"'/>";
    	html += "<input type='hidden' name='bookingOrderList[tempIndex].styleId' value='"+styleId+"'/>";
    	html += "</tr>";
		$("#listHtml").append(html);
		countPackageQuantity();
		countCartonStyleQuantity();
		countPackageRoughWeight();
		countCartonVolume();
    }
    //设置下标 
    var tempIndex;
	function setIndex(){
        var reg=/tempIndex/g;
		var trLen = $("#listHtml tr").length;
		if (trLen > 0) {
			for (var i = 0; i < trLen; i++) {
                    var tableTr = $("#listHtml tr").eq(i);
					$(tableTr).html($(tableTr).html().replace(reg,i));
			}
		}
	}
    
    function countPackageQuantity(){
    	var arr = $("#listHtml tr").find(".packageDetialspackageQuantity");
    	var vCount = 0;
    	$.each(arr,function(i,item){
    		vCount += parseInt($(item).text());
    	});    	
    	$("#divCount").find(".spanTotalnumberofcases").text(vCount);
    	$("#totalNumberofcases").val(vCount);
    }
   
    function countCartonStyleQuantity(){
    	var arr = $("#listHtml tr").find(".packageDetialscartonStyleQuantity");
    	var vCount = 0;
    	$.each(arr,function(i,item){
    		vCount += parseInt($(item).text());
    	});    	
    	$("#divCount").find(".spanTotalnumber").text(vCount);
    	$("#totalNumber").val(vCount);
    }
    
    function countPackageRoughWeight(){
    	var arr = $("#listHtml tr").find(".packageDetialspackageRoughWeight");
    	var vCount = 0;
    	$.each(arr,function(i,item){
    		vCount = (parseFloat(vCount) + parseFloat($(item).text().replace(/,/g,""))).toFixed(2);
    	});    	
    	$("#divCount").find(".spanTotalgrossweight").text(vCount);
    	$("#totalWeight").val(vCount);
    }
    
    function countCartonVolume(){
    	var arr = $("#listHtml tr").find(".packageDetialscartonVolume");
    	var vCount = 0;
    	$.each(arr,function(i,item){
    		vCount = (parseFloat(vCount) + parseFloat($(item).text().replace(/,/g,""))).toFixed(2);
    	});   	
    	$("#divCount").find(".spanTotallvolume").text(vCount);
    	$("#totalVolume").val(vCount);
    }    
    
   
    
    // 款式装箱单删除
    function deletePacking(obj){ 
		 if (confirm("<spring:message code="Bookingorders_create_areYouSure"/>")) {
            var tr=obj.parentNode.parentNode;  
            var tbody=tr.parentNode 
            tbody.removeChild(tr); 
            var row = document.getElementById("bookingorderinfo").rows.length;
    		$("#note").val(row);
    		
		}
	 }    
    
    
    /* 保存创建/编辑信息 */
    function saveForm(){
    	setIndex();
    	formUnFormat($("#inputForm"));
     	var params = $("#inputForm").serialize();
     	$.post("${ctx}/bookingspace/single/save",params,function(result){
    		// 弹出提示框,刷新父页面,关闭当前页面 
    		tipParent(result.message);
    		 window.parent.frames[0].searchListForm();
    		closeWin();  		
    	},'json');
    	
    }
    
    /* 选择箱单画面  */
    function selectPackage(){
    	if ($("#ognizationNameB").val() == "") {
    		tipParent("请选择收件公司");
			return;
		}
    	popup('950px','524px','${ctx}/bookingspace/single/BookingSheet?ognizationId=' + $("#ognizationIDB").val());
    }
   
</script>
</head>
<form id="inputForm">
<body>   

<!-- 创建页面head部 -->
		<div id="createHead" class="layerHeader clearfix">
		
			<c:choose>
		        <c:when test="${bookingOrders.id!=null && bookingOrders.id!=''}">
		             <!-- 修改编辑 -->
		            <p class="headerTitle"><spring:message code="Edit_booking_orders"/></p>
		        </c:when>
		        <c:otherwise>
		             <!-- 新建 -->
		            <p class="headerTitle"><spring:message code="New_booking_orders"/></p>
		        </c:otherwise>
		    </c:choose>
	
		    <div class="headerButton clearfix">
       			 <button type="button" class="btn-js" onclick="selectPackage()"><spring:message code="Booking_sheet" /></button>
        		 <button type="button" id="okButton"><spring:message code="btn_ok"/></button>
       			 <button type="button" onclick="closeWin()"><spring:message code="btn_cancle"/></button>
    		</div>
		</div>
	
		<!-- 确认页面head部 -->
		<div id="okHead" class="layerHeader clearfix" style="display:none">
			<p class="headerTitle"><spring:message code="personnel_head_confirm_info"/></p>
		    <div class="headerButton clearfix">
 		    	<shiro:hasPermission name="bookingspace:single:edit">
		        <button type="button" onclick="saveForm();"><spring:message code="common_save"/></button>
 				</shiro:hasPermission>
		        <button type="button" onclick="closeWin()"><spring:message code="btn_cancle"/></button>
		    </div>
		</div>

<div id="showHtml" class="smOrderBox">
	<input type="hidden" id="id" name="id" value="${bookingOrders.id}">
    <div class="items clearfix">
        <div class="col-33 clearfix haveToBox" style="left:80px">
        <!-- 收件公司 -->
            <p class="tit"><spring:message code="Bookingorders_Receipt_company" /></p>
          		<input type="text" style="width:200px" id="ognizationNameB" name="ognizationNameB" value="${bookingOrders.ognizationNameB}" data-rule-required="true" data-msg-required="<spring:message code="contract_error_msg_transportMode1" />"/>
          		<button type="button" onclick="popup('900px','584px','${ctx}/purchase/contract/ognizationList?ognizationFlag=5&frameFlg=2')"><spring:message code="Bookingorders_choose"/></button>
          		<input type="hidden" id="ognizationIDB" name="ognizationId" value="">
            	<input type="hidden" id="ognizationShortNameB" name="ognizationShortName" value="">
            <p class="haveTo">*</p>
        </div>
        
        <div class="col-33 clearfix haveToBox" style="left:150px">
        <!-- 委托公司  -->
            <p class="tit"><spring:message code="Bookingorders_Entrust_company" /></p>
            	<input type="hidden" id="entrustcompany" name="entrustcompany">
                	<input value="<spring:message code="Bookingorders_company" />" style="width: 250px"  disabled="disabled">
            
        </div>
        
    </div>
    <div class="items clearfix">
        <div class="col-33 clearfix haveToBox" style="left:80px">
        <!-- 收件地址  -->
            <p class="tit"><spring:message code="Bookingorders_Receives_address" /></p>
            	<input type="text"  style="width:250px" id="ognizationAddressB" name="ognizationAddressB" value="${bookingOrders.ognizationAddressB}" data-rule-required="true" data-msg-required="<spring:message code="contract_error_msg_transportMode3" />"/>
            <p class="haveTo">*</p>
        </div>
        <div class="col-33 clearfix haveToBox" style="left:150px">
        <!-- 交货条件  -->
            <p class="tit"><spring:message code="Bookingorders_Termsofdelivery" /></p>
             	<input type="text" style="width:250px" id="termsofDelivery" name="termsofDelivery" value="${bookingOrders.termsofDelivery}"/>
        </div>
        
       
    </div>
    <div class="items clearfix" >        	
        <div class="col-33 clearfix haveToBox" style="left:80px">
        <!-- 主联系人  -->
            <p class="tit"><spring:message code="Bookingorders_main_contact" /></p>
                <input type="text" style="width:250px" id="contactPersonB" name="contactPersonB" value="${bookingOrders.contactPersonB}" data-rule-required="true" data-msg-required="<spring:message code="contract_error_msg_transportMode6" />"/>
         	<p class="haveTo">*</p>
         </div>
                
                <div class="col-33 clearfix haveToBox" style="left:150px">
                <!-- 装货港  -->
                    <p class="tit"><spring:message code="Bookingorders_portofloading" /></p>
                    <input type="text" style="width:80px" id="portoFloading" name="portoFloading" value="${bookingOrders.portoFloading}"/>
                </div>
                <div class="col-33 clearfix haveToBox" style="left:0px">
                <!-- 目的港  -->
                    <p class="tit"><spring:message code="Bookingorders_portofdestination" /></p>
                    <input type="text" style="width:80px" id="portoFdestiNation" name="portoFdestiNation" value="${bookingOrders.portoFdestiNation}"/>
                </div>
            </div>
    
            <div class="items clearfix">        	
                <div class="col-33 clearfix haveToBox" style="left:80px">
                <!-- 联系电话  -->
                    <p class="tit"><spring:message code="Bookingorders_Contact_phone" /></p>
                    <input type="text" style="width:250px" id="contactPhoneB" name="contactPhoneB" value="${bookingOrders.contactPhoneB}"/>
                </div>
                <div class="col-33 clearfix haveToBox" style="left:150px">
                <!-- 运输方式  -->
                    <p class="tit"><spring:message code="Bookingorders_mode_transportation" /></p>
             		<c:set value="<%=ResourcesUtil.getConfig(\"transport_mode\")%>" var="transportMode"/>
           			 <select id="transportMode" name="transportMode"  style="width:80px" data-rule-required="true" data-msg-required="<spring:message code="contract_error_msg_transportMode" />">
            			<option value=""><spring:message code="contract_edit_please" /></option>
            		<c:forEach items="${fns:getDictList(transportMode)}"   var="transportMode">
	                            <option value="${transportMode.itemCode}-${transportMode.itemValue}" <c:if test="${fn:split(bookingOrders.transportMode,'-')[1] eq transportMode.itemValue}">selected="selected"</c:if>> 
	                                ${transportMode.itemName}
	                            </option>
	                </c:forEach>
           			 </select>
           			 <p class="haveTo">*</p>
            	 </div>
            	  <div class="col-33 clearfix haveToBox" style="left:0px">
        		<!-- 订舱费用  -->
            		<p class="tit"><spring:message code="Bookingorders_Bookingfee" /></p>
            		<input type="tel" style="width:80px" id="bookingFee" name="bookingFee" value="<fmt:formatNumber value="${bookingOrders.bookingFee}" pattern="#,##0.00"/>" onfocus="unFormat(this);" onblur="formatMoney(this, 2);" data-rule-required="true" data-msg-required="<spring:message code="contract_error_msg_transportMode5" />"/>
         		  	<p class="haveTo">*</p>
         		  </div>
         	</div>
         	
            <div class="items clearfix" id="divCount">
                <div class="haveToBox" style="left:80px">
                 <!--总件数 -->
                    <p class="tit" style="color: red;width:120px;"><spring:message code="Bookingorders_totalnumber" /><span class="spanTotalnumber"><fmt:formatNumber value="${bookingOrders.totalNumber}" pattern="#,##0"/></span></p>
                    <input type="hidden" id="totalNumber" name="totalNumber" value="${bookingOrders.totalNumber}"/>
                </div>
                <div class="haveToBox" style="left:150px">
                 <!-- 总箱数 -->
                    <p class="tit" style="color: red;width:120px;"><spring:message code="Bookingorders_totalnumberofcases"/><span class="spanTotalnumberofcases"><fmt:formatNumber value="${bookingOrders.totalNumberofcases}" pattern="#,##0"/></span></p>
                    <input type="hidden" id="totalNumberofcases" name="totalNumberofcases" value="${bookingOrders.totalNumberofcases}"/>
                </div>
                <div class="haveToBox" style="left:230px">
        		 <!-- 总毛重 -->
                    <p class="tit" style="color: red;width:120px;"><spring:message code="Bookingorders_Totalgrossweight" /><span class="spanTotalgrossweight"><fmt:formatNumber value="${bookingOrders.totalWeight}" pattern="#,##0.00"/></span></p>
                    <input type="hidden" id="totalWeight" name="totalWeight" value="${bookingOrders.totalWeight}"/>
   				</div>
   				 <div class="haveToBox" style="left:300px">
        		 <!-- 总体积 -->
                    <p class="tit" style="color: red;width:120px;"><spring:message code="Bookingorders_totalvolume" /><span class="spanTotallvolume"><fmt:formatNumber value="${bookingOrders.totalVolume}" pattern="#,##0.00"/></span></p>
                    <input type="hidden" id="totalVolume" name="totalVolume" value="${bookingOrders.totalVolume}"/>
   				</div>			
                
   				
</div>
</div>	
<div class="tabBoxSm" id="handbookinfo">
	<input type="hidden" id="trIndex" name="trIndex" value="${bookingOrders.trIndex}"/>
	<div class="tableArea">
   	 <div class="tableScroll tableScrollSm">
        <table cellpadding="0" class="tableHead">
            <thead>
            <tr>
            	<th><p class="tab-cz" style="width: 50px"><spring:message code="Bookingorders_operation" /></p></th>
            	<th><p class="tab-htddh" style="width: 100px"><spring:message code="Bookingorders_PackinglistNo" /></p></th>
                <th><p class="tab-htddh" style="width: 100px"><spring:message code="contractorder_ID" /></p></th>
                <th><p class="tab-ksbh" style="width: 120px"><spring:message code="Bookingorders_stylenumber" />/<spring:message code="Bookingorders_stylename" /></p></th>
                <th><p class="tab-jhrq" style="width: 70px"><spring:message code="Bookingorders_deliverydate" /></p></th>
                <th><p class="tab-rkrq" style="width: 70px"><spring:message code="Bookingorders_Inbounddate" /></p></th>
                <th><p class="tab-gb" style="width: 70px"><spring:message code="Bookingorders_country" /></p></th>
                <th><p class="tab-xs" style="width: 70px"><spring:message code="Bookingorders_numberofcases" /></p></th>
                <th><p class="tab-js" style="width: 70px"><spring:message code="Bookingorders_number" /></p></th>
                <th><p class="tab-mz" style="width: 70px"><spring:message code="Bookingorders_grossweight" /></p></th>
                <th><p class="tab-tj" style="width: 70px"><spring:message code="Bookingorders_volume" /></p></th>
                <th class="tab-bz" style="width: 70px"><spring:message code="Bookingorders_note" /></th>
            </tr>
            </thead>
        </table>
          
        <table cellpadding="0" class="tableBody">
            <tbody id="listHtml">
            <c:forEach items="${bookingOrders.bookingOrderList}" var="booking" varStatus="importStatus">
						<tr>										    											
							<!-- 合同订单号 -->										
							<input type="hidden" name="bookingOrderList[${importStatus.index}].indentId" value="${booking.indentId}"/>	
							<!-- 款式编号 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].styleCustomerNo" value="${booking.styleCustomerNo}"/>											
							<!-- 款式名称 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].styleNameCn" value="${booking.styleNameCn}"/>											
							<!-- 交货日期 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].deliveryDate" value="${booking.deliveryDate}"/>									
							<!-- 入库日期 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].inboundDate" value="${booking.inboundDate}">																						
							<!-- 国别 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].countryCd" value="${booking.countryCd}"/>										
							<!-- 箱数 -->
							<input type="hidden" name="importDetailsList[${importStatus.index}].packageQuantity" value="${booking.packageQuantity}"/>											
							<!-- 件数 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].packageStyleQuantity" value="${booking.packageStyleQuantity}"/>											
							<!-- 毛重 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].packageRoughWeight" value="${booking.packageRoughWeight}"/>
							<!-- 体积 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].packageVolume" value="${booking.packageVolume}"/>											
						    <!-- 备注 -->											
							<input type="hidden" name="bookingOrderList[${importStatus.index}].noteRemarks" value="${booking.noteRemarks}"/>                                            											                                           
					   </tr>
			</c:forEach>
            </tbody>
        </table>
     </div>
	</div>
</div>
</form>
<script>
	window.onload = function(){
	$('.tableScrollSm').css('height','325px')
	$('td input').each(function(){
		var tdH = $(this).parents('td').height()
		$(this).css('height',tdH)
		})
	}
	var tableW = $('.tableHead').outerWidth();
	$('.tableScroll').css('width',tableW + 18 + 'px')

</script>
</body>
</html>
